<template>
    <div class="data-content">
        <div v-if="corpType == '施工' || corpType == '勘察设计'">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="总承包业绩" name="1a"></el-tab-pane>
                <el-tab-pane label="分承包业绩" name="2a"></el-tab-pane>
            </el-tabs>
            <div v-if="jtyeji.rows.length > 0">
                <div style="font-size: 15px;">
                    共查询到 <span style="color: #1989fa;">{{ jtyeji.pageObj.countSize }}</span> 条数据，
                    当前第 <span style="color: #1989fa;">{{ jtyeji.pageObj.curpage ? jtyeji.pageObj.curpage:'1' }}</span> 页，
                    共计 <span style="color: #1989fa;">{{ jtyeji.pageObj.maxPage }}</span> 页
                    <el-button type="text" @click.stop="previousPage(jtyeji.pageObj.curpage)"> 上一页</el-button>
                    <el-button type="text" @click.stop="nextPage(jtyeji.pageObj.curpage)"> 下一页</el-button>
                </div>
                <table class="layui-table">
                    <colgroup>
                        <col width="60">
                        <col width="400">
                        <col width="120">
                        <col width="100">
                        <col width="100">
                        <col width="150">
                        <col width="150">
                        <col width="150">
                        <col width="160">
                        <col width="160">
                        <col width="160">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>项目名称</th>
                        <th>标段名称</th>
                        <th>合同金额（万元）</th>
                        <th>结算价（万元）</th>
                        <th>开工日期</th>
                        <th>交工日期</th>
                        <th>录入日期</th>
                        <th>业绩所在省份</th>
                        <th>信息来源</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in jtyeji.rows" :key="index">
                        <td>{{ (jtyeji.pageObj.curpage - 1) * 10 + index + 1 }}</td>
                        <td>
                            <div style="color: #1989fa; padding-top: 10px">
                                <span style="color: #1989fa" @click.stop="toJTProjectInfo(item.id, item.companyId)">
                                    {{ item.projectName }}
                                </span>
                            </div>
                        </td>
                        <td>{{ item.segmentName }}</td>
                        <td>{{ item.contractPrice }}</td>
                        <td>{{ item.settlementPrice }}</td>
                        <td>{{ item.beginDate }}</td>
                        <td>{{ item.handDate }}</td>
                        <td>{{ item.createtime }}</td>
                        <td>{{ item.province }}</td>
                        <td>{{ item.sourceInfo }}</td>
                        <td>
                            <el-button type="text" @click.stop="toJTProjectInfo(item.id, item.companyId)"> 详情</el-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-else style="font-size: 16px;">
                未查询到数据
            </div>
        </div>
        <div v-if="corpType == '监理'" >
            <div v-if="jtyeji.rows.length > 0">
                <div style="font-size: 15px;">
                    共查询到 <span style="color: #1989fa;">{{ jtyeji.pageObj.countSize }}</span> 条数据，
                    当前第 <span style="color: #1989fa;">{{ jtyeji.pageObj.curpage ? jtyeji.pageObj.curpage:'1' }}</span> 页，
                    共计 <span style="color: #1989fa;">{{ jtyeji.pageObj.maxPage }}</span> 页
                    <el-button type="text" @click.stop="previousPage(jtyeji.pageObj.curpage)"> 上一页</el-button>
                    <el-button type="text" @click.stop="nextPage(jtyeji.pageObj.curpage)"> 下一页</el-button>
                </div>
                <table class="layui-table">
                    <colgroup>
                        <col width="60">
                        <col width="200">
                        <col width="120">
                        <col width="150">
                        <col width="150">
                        <col width="150">
                    </colgroup>
                    <thead>
                    <tr>
                        <th rowspan="2">序号</th>
                        <th rowspan="2">项目名称</th>
                        <th rowspan="2">标段名称</th>
                        <th rowspan="2">合同金额（万元）</th>
                        <th colspan="6">项目人员</th>
                    </tr>
                    <tr>
                        <th width="120">姓名</th>
                        <th width="120">证书(专业)</th>
                        <th width="120">到岗日期</th>
                        <th width="120">离岗日期</th>
                        <th width="120">岗位职务</th>
                        <th width="120">是否在本企业</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in jtyeji.rows" :key="index">
                        <td>{{ (jtyeji.pageObj.curpage - 1) * 10 + index + 1 }}</td>
                        <td>
                            <div style="color: #1989fa; padding-top: 10px">
                                <span style="color: #1989fa" @click.stop="toJTProjectInfo(item.project_id, item.companyId)">
                                    {{ item.projectName }}
                                </span>
                            </div>
                        </td>
                        <td>{{ item.segmentName }}</td>
                        <td>{{ item.contractPrice }}</td>
                        <td colspan="6" style="padding: 0;">
                            <table class="layui-table">
                                <tbody>
                                    <tr v-for="(renyuan, index) in item.renyuans" :key="index">
                                        <td width="120">
                                            <div style="color: #1989fa; padding-top: 10px">
                                                <span style="color: #1989fa" @click.stop="getJTRenYuanXQ(renyuan.personid, '1')">
                                                    {{ renyuan.name }}
                                                </span>
                                            </div>
                                        </td>
                                        <td width="120">
                                            <span style="color: black"> {{renyuan.certificateNumber}}
                                                <span v-if="renyuan.professionalCertificate">({{renyuan.professionalCertificate}})</span>
                                            </span>
                                        </td>
                                        <td width="120">{{renyuan.startDate}}</td>
                                        <td width="120">{{renyuan.endDate}}</td>
                                        <td width="120">{{renyuan.workStation}}</td>
                                        <td width="120">{{renyuan.inCompany}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-else style="font-size: 16px;">
                未查询到数据
            </div>
        </div>
        <el-link v-if="jtyeji.rows.length > 0" type="info" :underline="false">*此数据来全国公路建设市场信用信息管理系统官方网站</el-link>
        <!--业绩详情 弹窗-->
        <el-dialog title="业绩详情" :visible.sync="dialogjtProjectVisible">
            <yeji-info :corp-type="corpType" :project-id="projectId" :company-id="companyId"></yeji-info>
        </el-dialog>


        <!-- 交通，人员详情 弹窗 -->
        <el-dialog title="人员详情" :visible.sync="dialogjtRenYuanVisible">
            <renyuan-info :jt-ren-yuan-type="1" :person-id="personId" :person-type="personType" corp-type="corpType"></renyuan-info>
        </el-dialog>
    </div>
</template>

<script>
import yejiInfo from './yejiinfo'
import renyuanInfo from './renyuaninfo'
export default {
    props: {
        jiaotongComId: {
            type: String,
            default: ''
        },
        corpType: {
            type: String,
            default: ''
        }
    },
    components:{
        yejiInfo,
        renyuanInfo
    },
    data: () => ({
        dialogjtProjectVisible: false,
        dialogjtRenYuanVisible: false,
        jtyeji: {rows:[]},
        total: '',
        pageSize: 10,
        pageNo: 1,
        activeName: '1a',
        projectId:'',
        companyId:'',
        personId :'',
        personType :'',
        jtRenYuanType: '',
    }),
    watch:{
        jiaotongComId:{
            handler(n,o){
                this.getJTyeji('1a');
            },
            deep:true,
        }
    },
    methods: {
        handleClick: function(tab, event){
            this.activeName = tab.name;
            this.getJTyeji(tab.name);
        },
        //列表 下一页
        nextPage: function(pageNo){
            this.pageNo = pageNo + 1;
            this.getJTyeji(this.activeName);
        },
        //列表 上一页
        previousPage: function(pageNo){
            if(pageNo > 1){
                this.pageNo = pageNo - 1;
            }else {
                this.pageNo = 1;
            }
            this.getJTyeji(this.activeName);
        },
        //获取 交通 人员详情
        getJTRenYuanXQ: function (personId, type) {
            this.personId = personId;
            this.personType = type;
            this.dialogjtRenYuanVisible = true;
        },


        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.getJTyeji(this.type)
        },
        handleCurrentChange: function(pageNo){
            this.pageNo = pageNo;
            this.getJTyeji(this.type)
        },
        currentPage:function (){
            this.getJTyeji(this.type)
        },
        //获取交通，业绩
        getJTyeji(type){
            var params = {};
            var corpType = this.corpType;
            var that = this;
            if(!that.jiaotongComId){return};
            if(corpType == '监理'){
                params = {
                    comId: that.jiaotongComId,
                    type: '1',
                    pageNo: that.pageNo,
                    pageSize: that.pageSize
                }
            }else if(corpType == '施工' || corpType == '勘察设计'){
                if(type != ''){
                    type = type;
                }else {
                    type = '1a'
                }
                params = {
                    comId: that.jiaotongComId,
                    type: type,
                    pageNo: that.pageNo,
                    pageSize: that.pageSize
                }
            } else {
                params = {
                    comId: '',
                    type: '',
                    pageNo: that.pageNo,
                    pageSize: that.pageSize
                }
            }
            this.$ajax({
                type:"get",
                url: `${that.$store.state.api.searchUrl}/searchjiaotong/jiaotong/yeji`,
                data: params,
                callback:function(data, res){
                    that.jtyeji = data;
                    that.total = data.pageObj.countSize
                }
            })
        },
        toJTProjectInfo(projectId, companyId){
            this.projectId = projectId;
            this.companyId = companyId;
            this.dialogjtProjectVisible = true;
        },
    },
    mounted() {
        // console.log(this.jiaotongComId)
        var type = "";
        if (this.corpType == "施工") {
            type = "0";
        } else if (this.corpType == "勘察设计") {
            type = "2";
        } else if (this.corpType == "监理") {
            type = "4";
        }
        this.jtRenYuanType = type;
        this.getJTyeji('1a');
    }
}
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
                font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
            background: #348bda;
            text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
